<template>
	<view class="add-device-box" :style="'padding-top:'+(barHeight)+'px'">
		<NavBar>
			<template v-slot:center>
				<view class="nav_center">
					新增设备
				</view>
			</template>
			<template v-slot:left>
				<text class="cancel-add" @click="cancelAdd">取消</text>
			</template>
		</NavBar>
		<view class="">
			<view class="add-form-box">
				<view class="form-item">
					<view class="title">设备编号</view>
					<input class="uni-input" placeholder="设备编号必填" v-model="deviceEntity.deviceNumber" />
				</view>
				<view class="form-item">
					<view class="title">设备名称</view>
					<input class="uni-input" placeholder="设备名称必填" v-model="deviceEntity.deviceName" />
				</view>
				<view class="form-item">
					<view class="title">制造编号</view>
					<input class="uni-input" placeholder="制造编号" v-model="deviceEntity.manufacturingNumber" />
				</view>
				<view class="form-item">
					<view class="title">设备类型</view>
					<view style="display: flex;align-items: center;" @click="loadModal">
						<input class="uni-input" placeholder="请选择设备类型" v-model="deviceTypeName" disabled />
						<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
					</view>
				</view>
				<view class="form-item">
					<view class="title">设备数量</view>
					<input class="uni-input" placeholder="设备数量" v-model="deviceEntity.number" />
				</view>
				<view class="form-item">
					<view class="title">设备规格</view>
					<input class="uni-input" placeholder="设备规格" v-model="deviceEntity.model" />
				</view>
				<view class="form-item">
					<view class="title">主体材质</view>
					<input class="uni-input" placeholder="主体材质" v-model="deviceEntity.material" />
				</view>
				<view class="form-item">
					<view class="title">合同日期</view>
					<uni-datetime-picker type="date" class="uni-input" placeholder="请选择项目开始时间" :clear-icon="false"
							v-model="deviceEntity.contractTime" />
				</view>
				<view class="form-item">
					<view class="title">结束日期</view>
					<uni-datetime-picker type="date" class="uni-input" placeholder="请选择项目开始时间" :clear-icon="false"
						v-model="deviceEntity.endTime" />
				</view>
				<view class="form-radio-item">
					<view class="title">图纸状态</view>
					<radio-group @change="drawStatusChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in drawStatusEntities"
							:key="item.id">
							<view>
								<radio :value="item.id" color="#3f8cf7" :checked="index === currentRadioDrawStatus"
									style="transform: scale(0.7)" />
							</view>
							<view>{{ item.label }}</view>
						</label>
					</radio-group>
				</view>
				<view class="form-radio-item">
					<view class="title">工艺文件状态</view>
					<radio-group @change="documentStatusChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in documentStatusEntities"
							:key="item.id">
							<view>
								<radio :value="item.id" color="#3f8cf7" :checked="index === currentRadioDocumentStatus"
									style="transform: scale(0.7)" />
							</view>
							<view>{{ item.label }}</view>
						</label>
					</radio-group>
				</view>
				<view class="form-radio-item">
					<view class="title">交工资料状态</view>
					<radio-group @change="handoverStatusChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in handoverStatusEntities"
							:key="item.id">
							<view>
								<radio :value="item.id" color="#3f8cf7" :checked="index === currentRadioHandoverStatus"
									style="transform: scale(0.7)" />
							</view>
							<view>{{ item.label }}</view>
						</label>
					</radio-group>
				</view>
				<view class="form-radio-item" style="border-bottom: none;">
					<view class="title">制造状态</view>
					<radio-group @change="manufacturingStatusChange">
						<label class="uni-list-cell uni-list-cell-pd"
							v-for="(item, index) in manufacturingStatusEntities" :key="item.id">
							<view>
								<radio :value="item.id" color="#3f8cf7"
									:checked="index === currentRadioManufacturingStatus"
									style="transform: scale(0.7)" />
							</view>
							<view>{{ item.label }}</view>
						</label>
					</radio-group>
				</view>
				<button style="margin: 20rpx" type="primary" @click="saveDevice">
					保存
				</button>
			</view>
			<!-- 设备类型 -->
			<view class="bottom-modal-box">
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content">
						<view class="item" v-for="data in deviceTypeEntities" @click="loadModalValue(data)">
							{{data.typeName}}
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				deviceTypeName: '', // 选择的设备类型名称
				deviceTypeEntities: [],
				currentRadioDrawStatus: 0,
				drawStatusEntities: [{
						id: '0',
						label: '设计中',
						checked: 'true',
					},
					{
						id: '1',
						label: '审核中'
					},
					{
						id: '2',
						label: '已审核'
					},
					{
						id: '3',
						label: '终版'
					}
				], // 选择的图纸状态名称
				currentRadioDocumentStatus: 0,
				documentStatusEntities: [{
						id: '0',
						label: '编辑中',
						checked: 'true',
					},
					{
						id: '1',
						label: '已审核'
					},
					{
						id: '2',
						label: '终版'
					},
				], // 选择的工艺文件状态名称
				currentRadioHandoverStatus: 0,
				handoverStatusEntities: [{
						id: '0',
						label: '收集中',
						checked: 'true',
					},
					{
						id: '1',
						label: '编辑中'
					},
					{
						id: '2',
						label: '审核中'
					},
					{
						id: '3',
						label: '已批准'
					},
					{
						id: '4',
						label: '已备案'
					},
					{
						id: '5',
						label: '已交付'
					},
				], // 选择的交工资料状态名称
				currentRadioManufacturingStatus: 0,
				manufacturingStatusEntities: [{
						id: '0',
						label: '未开始',
						checked: 'true',
					},
					{
						id: '1',
						label: '制造中'
					},
					{
						id: '2',
						label: '已逾期'
					},
					{
						id: '3',
						label: '制造完成'
					},
					{
						id: '4',
						label: '包装中'
					},
					{
						id: '5',
						label: '已发货'
					},
				], // 制造状态
				deviceEntity: {
					documentStatus: 0,
					manufacturingStatus: 0,
					handoverStatus: 0,
					drawStatus: 0
				},
				projectId: '',
				deviceId: '',
				barHeight: 0,
			}
		},
		onLoad(option) {
			this.projectId = option.projectId
			this.deviceId = option.deviceId
			if (this.deviceId) {
				this.querySingle()
			}
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45 + 10;
		},
		methods: {
			// 修改时回显
			async querySingle() {
				let res = await post(api.DeviceSingle, {id: this.deviceId})
				this.deviceEntity = res.data
				if (this.deviceEntity.deviceTypeId) {
					post(api.DeviceTypeSingle, {id: this.deviceEntity.deviceTypeId}).then(res=>{
						this.deviceTypeName = res.data == null ? null : res.data.typeName
					})
				}
				this.deviceEntity.documentStatus ? this.currentRadioDocumentStatus = this.deviceEntity.documentStatus : this.currentRadioDocumentStatus = 0
				this.deviceEntity.manufacturingStatus ? this.currentRadioManufacturingStatus = this.deviceEntity.manufacturingStatus : this.currentRadioManufacturingStatus = 0
				this.deviceEntity.handoverStatus ? this.currentRadioHandoverStatus = this.deviceEntity.handoverStatus : this.currentRadioHandoverStatus = 0
				this.deviceEntity.drawStatus ? this.currentRadioDrawStatus = this.deviceEntity.drawStatus : this.currentRadioDrawStatus = 0
			},
			// 取消返回
			cancelAdd() {
				uni.navigateTo({
					url: '/pages/project/component/ProjectInfo?id=' + this.projectId
				})
			},
			// 保存设备
			saveDevice() {
				if (this.deviceEntity.deviceNumber == null || this.deviceEntity.deviceNumber == '' || this.deviceEntity
					.deviceNumber == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '设备编号不能为空'
					})
				}
				if (this.deviceEntity.deviceName == null || this.deviceEntity.deviceName == '' || this.deviceEntity
					.deviceName == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '设备名称不能为空'
					})
				}
				this.deviceEntity.projectId = this.projectId
				let url = this.deviceId ? api.UpdateDevice : api.SaveDevice
				post(url, this.deviceEntity).then(res => {
					uni.navigateTo({
						url: '/pages/project/component/ProjectInfo?id=' + this.projectId
					})
				})
			},
			// 选择设备类型
			loadModal() {
				post(api.DeviceTypeEntities, {}).then(res => {
					this.deviceTypeEntities = res.data
					this.$refs.popup.open('bottom')
				})
			},
			loadModalValue(data) {
				this.deviceEntity.deviceTypeId = data.id
				this.deviceTypeName = data.typeName
				this.$refs.popup.close()
			},
			// 制造状态单选
			manufacturingStatusChange: function(evt) {
				for (let i = 0; i < this.manufacturingStatusEntities.length; i++) {
					if (this.manufacturingStatusEntities[i].id === evt.detail.value) {
						this.currentRadioManufacturingStatus = i
						this.deviceEntity.manufacturingStatus = i
						break
					}
				}
			},
			handoverStatusChange: function(evt) {
				for (let i = 0; i < this.handoverStatusEntities.length; i++) {
					if (this.handoverStatusEntities[i].id === evt.detail.value) {
						this.currentRadioHandoverStatus = i
						this.deviceEntity.handoverStatus = i
						break
					}
				}
			},
			documentStatusChange: function(evt) {
				for (let i = 0; i < this.documentStatusEntities.length; i++) {
					if (this.documentStatusEntities[i].id === evt.detail.value) {
						this.currentRadioDocumentStatus = i
						this.deviceEntity.documentStatus = i
						break
					}
				}
			},
			drawStatusChange: function(evt) {
				for (let i = 0; i < this.drawStatusEntities.length; i++) {
					if (this.drawStatusEntities[i].id === evt.detail.value) {
						this.currentRadioDrawStatus = i
						this.deviceEntity.drawStatus = i
						break
					}
				}
			},
		}
	}
</script>

<style>
	@import '../../../static/css/AddDevice.css';
	@import '../../../static/css/commons.css';
</style>